<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			#big {
				border: 1px solid #FF3300;
				width: 500px;
				height: 500px;
				position: relative;
				background: #0000FF;
				left: 50px;
				top: 50px;
			}

			#small {
				background: #99CC00;
				width: 200px;
				height: 150px;
				position: absolute;
				cursor: pointer;
				left: 10px;
				top: 10px;
			}
		</style>
		<script src="./js/jquery-1.7.2.min.js"></script>

	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>
<script language="javascript">
	$("#small").mousedown(function() {
		debugger;
		var obig = document.getElementById("big");
		var osmall = document.getElementById("small");
		var e = e || window.event;
		/*用于保存小的div拖拽前的坐标*/
		osmall.startX = e.clientX - osmall.offsetLeft;
		osmall.startY = e.clientY - osmall.offsetTop;
		var bigWidth = $(obig).outerWidth(true);;
		var bigHeight = $(obig).outerHeight(true);
		var smallWidth = $(osmall).outerWidth(true);;
		var smallHeight = $(osmall).outerHeight(true);
		/*鼠标的移动事件*/
		document.onmousemove = function(e) {
			var e = e || window.event;
			osmall.style.left = e.clientX - osmall.startX + "px";
			osmall.style.top = e.clientY - osmall.startY + "px";
			/*对于大的DIV四个边界的判断*/
			if (e.clientX - osmall.startX <= 0) {
				osmall.style.left = 0 + "px";
			}
			if (e.clientY - osmall.startY <= 0) {
				osmall.style.top = 0 + "px";
			}
			if (e.clientX - osmall.startX >= bigWidth - smallWidth) {
				osmall.style.left = bigWidth - smallWidth + "px";
			}
			if (e.clientY - osmall.startY >= bigHeight - smallHeight) {
				osmall.style.top = 450 + "px";
			}
		};
		/*鼠标的抬起事件,终止拖动*/
		document.onmouseup = function() {
			document.onmousemove = null;
			document.onmouseup = null;
		};

	});
</script>
